{% extends "base.html" %}

{% block title %}我的教练 - 乒乓球培训管理系统{% endblock %}

{% block extra_css %}
<style>
    /* 页面标题样式 */
    .page-title-box {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        padding: 25px 30px;
        border-radius: 10px;
        margin-bottom: 25px;
        color: white;
    }

    .page-title-box h2 {
        font-size: 24px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .page-title-box p {
        font-size: 14px;
        opacity: 0.9;
        margin: 0;
    }

    /* 统计卡片 */
    .stats-row {
        margin-bottom: 25px;
    }

    .stat-card {
        background: white;
        border-radius: 10px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        transition: transform 0.3s ease;
        margin-bottom: 15px;
        border-left: 4px solid;
    }

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    }

    .stat-card.primary { border-left-color: #667eea; }
    .stat-card.warning { border-left-color: #ffc107; }
    .stat-card.success { border-left-color: #28a745; }
    .stat-card.info { border-left-color: #17a2b8; }

    .stat-card .stat-icon {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .stat-card.primary .stat-icon { color: #667eea; }
    .stat-card.warning .stat-icon { color: #ffc107; }
    .stat-card.success .stat-icon { color: #28a745; }
    .stat-card.info .stat-icon { color: #17a2b8; }

    .stat-value {
        font-size: 28px;
        font-weight: 700;
        color: #2c3e50;
        margin-bottom: 5px;
    }

    .stat-label {
        font-size: 13px;
        color: #6c757d;
    }

    .stat-detail {
        font-size: 11px;
        color: #adb5bd;
        margin-top: 5px;
    }

    /* 内容区块 */
    .content-section {
        background: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 12px;
        border-bottom: 2px solid #e9ecef;
    }

    .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #2c3e50;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .section-title i {
        color: #667eea;
        font-size: 20px;
    }

    .badge-count {
        background: #667eea;
        color: white;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
    }

    /* 教练卡片 */
    .coach-card {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 15px;
        border: 1px solid #e9ecef;
        margin-bottom: 15px;
        transition: all 0.3s ease;
        position: relative;
    }

    .coach-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-color: #667eea;
    }

    .coach-card-header {
        display: flex;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 15px;
    }

    .coach-avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        object-fit: cover;
        border: 3px solid white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .coach-info {
        flex: 1;
    }

    .coach-name {
        font-size: 16px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 5px;
    }

    .coach-level {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        margin-right: 8px;
    }

    .level-senior { background: linear-gradient(45deg, #ffd700, #ff8c00); color: white; }
    .level-middle { background: linear-gradient(45deg, #c0c0c0, #808080); color: white; }
    .level-junior { background: linear-gradient(45deg, #cd7f32, #8b4513); color: white; }

    .coach-status {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 500;
    }

    .status-approved {
        background: #d4edda;
        color: #155724;
    }

    .status-pending {
        background: #fff3cd;
        color: #856404;
    }

    .coach-meta {
        font-size: 13px;
        color: #6c757d;
        margin-top: 5px;
    }

    .coach-meta span {
        margin-right: 15px;
    }

    /* 教练详细信息 */
    .coach-details {
        display: flex;
        gap: 20px;
        padding: 12px 0;
        border-top: 1px solid #dee2e6;
        border-bottom: 1px solid #dee2e6;
        margin: 12px 0;
    }

    .detail-item {
        flex: 1;
    }

    .detail-label {
        font-size: 11px;
        color: #6c757d;
        margin-bottom: 3px;
    }

    .detail-value {
        font-size: 14px;
        font-weight: 600;
        color: #2c3e50;
    }

    /* 动作按钮 */
    .coach-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
    }

    .coach-actions .btn {
        padding: 6px 12px;
        font-size: 13px;
        border-radius: 6px;
        transition: all 0.3s ease;
    }

    /* 空状态 */
    .empty-state {
        text-align: center;
        padding: 50px 20px;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 48px;
        margin-bottom: 20px;
        color: #dee2e6;
    }

    .empty-state h4 {
        font-size: 18px;
        margin-bottom: 10px;
        color: #495057;
    }

    .empty-state p {
        margin-bottom: 20px;
        font-size: 14px;
    }

    /* 快速操作 */
    .quick-actions {
        display: flex;
        gap: 15px;
        margin-top: 20px;
    }

    .quick-action-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 15px;
        background: #f8f9fa;
        border: 1px solid #e9ecef;
        border-radius: 8px;
        text-decoration: none;
        color: #495057;
        transition: all 0.3s ease;
    }

    .quick-action-btn:hover {
        background: #667eea;
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(102,126,234,0.3);
        text-decoration: none;
    }

    .quick-action-btn i {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .quick-action-btn span {
        font-size: 13px;
        font-weight: 500;
    }

    /* 申请说明 */
    .apply-note {
        background: #fff3cd;
        padding: 10px;
        border-radius: 6px;
        margin-top: 10px;
        font-size: 13px;
    }

    .apply-note strong {
        color: #856404;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
        .coach-details {
            flex-direction: column;
            gap: 8px;
        }

        .coach-actions {
            flex-wrap: wrap;
        }

        .quick-actions {
            flex-wrap: wrap;
        }

        .stats-row .col-6 {
            margin-bottom: 15px;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 页面标题 -->
    <div class="page-title-box">
        <h2><i class="fas fa-user-friends"></i> 我的教练</h2>
        <p>管理您的师生关系，跟踪学习进度</p>
    </div>

    <!-- 统计信息 -->
    <div class="row stats-row">
        <div class="col-md-3 col-6">
            <div class="stat-card primary">
                <div class="stat-icon"><i class="fas fa-user-check"></i></div>
                <div class="stat-value">{{ approved_relations|length }}</div>
                <div class="stat-label">当前教练</div>
                <div class="stat-detail">最多可选择2位</div>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="stat-card warning">
                <div class="stat-icon"><i class="fas fa-hourglass-half"></i></div>
                <div class="stat-value">{{ pending_relations|length }}</div>
                <div class="stat-label">待审核申请</div>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="stat-card success">
                <div class="stat-icon"><i class="fas fa-calendar-check"></i></div>
                <div class="stat-value">0</div>
                <div class="stat-label">本月课程</div>
            </div>
        </div>
        <div class="col-md-3 col-6">
            <div class="stat-card info">
                <div class="stat-icon"><i class="fas fa-award"></i></div>
                <div class="stat-value">{{ 2 - approved_relations|length }}</div>
                <div class="stat-label">剩余名额</div>
            </div>
        </div>
    </div>

    <!-- 当前教练列表 -->
    <div class="content-section">
        <div class="section-header">
            <div class="section-title">
                <i class="fas fa-check-circle"></i>
                当前教练
                <span class="badge-count">{{ approved_relations|length }} / 2</span>
            </div>
            {% if approved_relations|length < 2 %}
            <a href="{{ url_for('student_coach.search') }}" class="btn btn-sm btn-primary">
                <i class="fas fa-plus"></i> 添加教练
            </a>
            {% endif %}
        </div>

        {% if approved_relations %}
        <div class="row">
            {% for relation in approved_relations %}
            <div class="col-lg-6">
                <div class="coach-card">
                    <div class="coach-card-header">
                        <img src="{{ relation.coach.photo_url or url_for('static', filename='images/default-avatar.svg') }}"
                             alt="{{ relation.coach.real_name }}" class="coach-avatar">
                        <div class="coach-info">
                            <div class="coach-name">
                                {{ relation.coach.real_name }}
                                <span class="coach-level level-{{ relation.coach.coach_level|lower }}">
                                    {{ {'senior': '高级', 'middle': '中级', 'junior': '初级'}[relation.coach.coach_level] }}教练
                                </span>
                                <span class="coach-status status-approved">
                                    <i class="fas fa-check"></i> 已确认
                                </span>
                            </div>
                            <div class="coach-meta">
                                <span><i class="fas fa-venus-mars"></i> {{ relation.coach.gender == 'male' and '男' or '女' }}</span>
                                {% if relation.coach.age %}
                                <span><i class="fas fa-birthday-cake"></i> {{ relation.coach.age }}岁</span>
                                {% endif %}
                                <span class="text-primary"><i class="fas fa-yen-sign"></i> {{ relation.coach.hourly_rate or '0.00' }}/课时</span>
                            </div>
                            {% if relation.coach.bio %}
                            <div class="coach-meta mt-2">
                                <i class="fas fa-quote-left"></i> {{ relation.coach.bio[:50] }}{% if relation.coach.bio|length > 50 %}...{% endif %}
                            </div>
                            {% endif %}
                        </div>
                    </div>

                    <div class="coach-details">
                        <div class="detail-item">
                            <div class="detail-label">已上课程</div>
                            <div class="detail-value">12</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">教学评分</div>
                            <div class="detail-value text-warning">4.8 <i class="fas fa-star"></i></div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">建立关系</div>
                            <div class="detail-value">{{ relation.created_at.strftime('%Y-%m-%d') if relation.created_at else '--' }}</div>
                        </div>
                    </div>

                    <div class="coach-actions">
                        <a href="{{ url_for('student_reservations.create') }}?coach_id={{ relation.coach_id }}"
                           class="btn btn-primary btn-sm">
                            <i class="fas fa-calendar-plus"></i> 预约课程
                        </a>
                        <a href="{{ url_for('student_coach.detail', coach_id=relation.coach_id) }}"
                           class="btn btn-outline-secondary btn-sm">
                            <i class="fas fa-info-circle"></i> 详情
                        </a>
                        <button onclick="removeCoach({{ relation.id }})" class="btn btn-outline-danger btn-sm">
                            <i class="fas fa-user-times"></i> 解除
                        </button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <div class="empty-state">
            <i class="fas fa-user-slash"></i>
            <h4>暂无教练</h4>
            <p>您还没有选择任何教练，快去寻找适合您的教练吧！</p>
            <a href="{{ url_for('student_coach.search') }}" class="btn btn-primary">
                <i class="fas fa-search"></i> 寻找教练
            </a>
        </div>
        {% endif %}
    </div>

    <!-- 待审核申请 -->
    {% if pending_relations %}
    <div class="content-section">
        <div class="section-header">
            <div class="section-title">
                <i class="fas fa-clock"></i>
                待审核申请
                <span class="badge-count bg-warning text-dark">{{ pending_relations|length }}</span>
            </div>
        </div>

        <div class="row">
            {% for relation in pending_relations %}
            <div class="col-lg-6">
                <div class="coach-card">
                    <div class="coach-card-header">
                        <img src="{{ relation.coach.photo_url or url_for('static', filename='images/default-avatar.svg') }}"
                             alt="{{ relation.coach.real_name }}" class="coach-avatar">
                        <div class="coach-info">
                            <div class="coach-name">
                                {{ relation.coach.real_name }}
                                <span class="coach-level level-{{ relation.coach.coach_level|lower }}">
                                    {{ {'senior': '高级', 'middle': '中级', 'junior': '初级'}[relation.coach.coach_level] }}教练
                                </span>
                                <span class="coach-status status-pending">
                                    <i class="fas fa-hourglass-half"></i> 审核中
                                </span>
                            </div>
                            <div class="coach-meta">
                                <span><i class="fas fa-clock"></i> 申请时间：{{ relation.created_at.strftime('%Y-%m-%d') if relation.created_at else '--' }}</span>
                                <span class="text-primary"><i class="fas fa-yen-sign"></i> {{ relation.coach.hourly_rate or '0.00' }}/课时</span>
                            </div>
                        </div>
                    </div>

                    {% if relation.apply_note %}
                    <div class="apply-note">
                        <strong>申请说明：</strong>
                        {{ relation.apply_note }}
                    </div>
                    {% endif %}

                    <div class="coach-actions mt-3">
                        <a href="{{ url_for('student_coach.detail', coach_id=relation.coach_id) }}"
                           class="btn btn-outline-primary btn-sm">
                            <i class="fas fa-info-circle"></i> 查看详情
                        </a>
                        <button onclick="cancelApplication({{ relation.id }})" class="btn btn-outline-danger btn-sm">
                            <i class="fas fa-times"></i> 取消申请
                        </button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- 快速操作 -->
    <div class="content-section">
        <div class="section-header">
            <div class="section-title">
                <i class="fas fa-rocket"></i>
                快速操作
            </div>
        </div>
        <div class="quick-actions">
            <a href="{{ url_for('student_coach.search') }}" class="quick-action-btn">
                <i class="fas fa-search"></i>
                <span>寻找教练</span>
            </a>
            <a href="{{ url_for('student_coach.applications') }}" class="quick-action-btn">
                <i class="fas fa-list-alt"></i>
                <span>申请记录</span>
            </a>
            <a href="{{ url_for('student_reservations.index') }}" class="quick-action-btn">
                <i class="fas fa-calendar"></i>
                <span>我的预约</span>
            </a>
            <a href="{{ url_for('evaluations.index') }}" class="quick-action-btn">
                <i class="fas fa-star"></i>
                <span>学习评价</span>
            </a>
        </div>
    </div>
</div>

<!-- 确认对话框 -->
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">确认操作</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="confirmMessage">
                确认要执行此操作吗？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmBtn">确认</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function removeCoach(relationId) {
    $('#confirmMessage').text('确认要解除与该教练的师生关系吗？解除后需要重新申请。');
    $('#confirmBtn').off('click').on('click', function() {
        $.post(`/student-coach/remove-coach/${relationId}`, function() {
            location.reload();
        }).fail(function(xhr) {
            alert('操作失败：' + (xhr.responseJSON?.message || '未知错误'));
        });
        $('#confirmModal').modal('hide');
    });
    $('#confirmModal').modal('show');
}

function cancelApplication(relationId) {
    $('#confirmMessage').text('确认要取消这个申请吗？');
    $('#confirmBtn').off('click').on('click', function() {
        $.post(`/student-coach/cancel-application/${relationId}`, function() {
            location.reload();
        }).fail(function(xhr) {
            alert('操作失败：' + (xhr.responseJSON?.message || '未知错误'));
        });
        $('#confirmModal').modal('hide');
    });
    $('#confirmModal').modal('show');
}
</script>
{% endblock %}